<template>
    <div class="container">
        <h3>供货商</h3>
        <el-form :model="ruleForm" ref="ruleForm"  :rules = "rules" :label-position="labelPosition" label-width="120px" class="demo-ruleForm">
            
            <div >
                <el-row>
                <el-col :span="12">
                    <el-form-item label="供应商名称：" prop="supplierName">
                       <el-input placeholder="请输入内容" v-model="ruleForm.supplierName" style="width:300px">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="所在地区：" prop="area">
                        <el-cascader size="large" :options="options" style="width:300px" v-model="ruleForm.area" @change="handleChange"></el-cascader>
                    </el-form-item>
                    <el-form-item label="联系方式：" prop="phone"> 
                       <el-input placeholder="请输入内容" v-model="ruleForm.phone" style="width:300px">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item label="联系人姓名：" prop="userName">
                       <el-input placeholder="请输入内容" v-model="ruleForm.userName" style="width:325px">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="详细地址：" prop="address">
                       <el-input placeholder="请输入内容" v-model="ruleForm.address" style="width:325px">
                        </el-input>
                    </el-form-item>    
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="21">
                 <el-form-item label="备注：" >
                    <el-input type="textarea" name="" id="" rows="5"  v-model="ruleForm.remark"></el-input>
                </el-form-item>
                </el-col>
            </el-row>
            <el-form-item class="footerFixed">
                <el-button type="primary" @click="submitrule('ruleForm')">提交</el-button>
                <el-button @click="backPage">返回</el-button>
            </el-form-item>
            </div>
        </el-form>
    </div>
</template>
<script>
    import {supplier_save,supplier_findById,supplier_update} from '@/request/api'
    import {regionData,CodeToText} from 'element-china-area-data'
    export default {

        data() {
            return {
                isShow:false,
                city:'',
                area:'',
                options: regionData,
                selectedOptions: [],
                labelPosition:'right',
                allMessage: '',
                ruleForm: {
                    supplierName:'',
                    area:'',
                    address:'',
                    userName:'',
                    phone:'',
                    remark:''
                },
                rules:{
                    // supplierName: [
                    //     { required: true, message: '不能为空', trigger: 'change' }
                    // ],
                    // address: [
                    //     { required: true, message: '不能为空', trigger: 'change' }
                    // ],
                    // phone: [
                    //     { required: true, message: '不能为空', trigger: 'change' }
                    // ],
                    // area: [
                    //     { required: true, message: '不能为空', trigger: 'change' }
                    // ],
                    // userName: [
                    //     { required: true, message: '不能为空', trigger: 'change' }
                    // ],
                  
                }
            };
        },
        mounted(){  
            this.id = this.$route.query.id
            if(this.id == undefined){
                
            }else{
                this.init()
            }
        },
        methods: {
            init(){
                supplier_findById(this.id).then((res)=>{
                    this.ruleForm = res.data
					this.ruleForm.area = this.ruleForm.area.split(",")			

                })
            },
            handleChange(value) {
   
            },

            backPage () {
                this.$router.go(-1);
            },

            submitrule(formName) {
                this.$refs[formName].validate((valid)=>{
                    if(valid){
                        if(this.ruleForm.phone != ""){
                            let reg = /^1[34578]\d{9}$/;
                            if(!reg.test(this.ruleForm.phone)){
                                this.$notify({
                                    title: '提示',
                                    message: '手机号格式不正确，请重新填写',
                                    type: 'info'
                                });
                                return false
                            }
                        }
						this.ruleForm.area = this.ruleForm.area.join(",")
                        if(this.id == undefined){
                            supplier_save(this.ruleForm).then((res)=>{
                                this.$notify({
                                    title: '提示',
                                    message: '保存成功',
                                    type: 'success',
                                    duration:1000
                                });
                                this.$router.go(-1)
                            })
                        }else{
                            supplier_update(this.ruleForm).then((res)=>{
                                this.$notify({
                                    title: '提示',
                                    message: '修改成功',
                                    type: 'success',
                                    duration:1000
                                });
                                this.$router.go(-1)
                            })
                        }         
                    }else{
                        return false
                    }
                })
            },
        }
    }
</script>

<style scoped lang="less">
.demo-ruleForm{
    margin-top: 10px;
}
.demo-ruleForm .el-radio--small.is-bordered{
    width: 120px !important;
    margin-right: 10px !important;
}
.box{
    width: 85%;
    margin-bottom: 15px;
    dl{
        margin-bottom: 20px;
        overflow: hidden;
        dt{ margin-bottom: 5px; font-size: 14px;}
        dd{ font-weight: 500; font-size: 12px; float: left; width: 50%; line-height: 24px;}
    }
    dl:last-child{
        margin-bottom: 0;
    }
    .el-col-11{
        height: 200px;
        overflow-y: auto;
        margin-left: 10px;
        border-left: 1px solid #EBEEF5;
        padding-left: 10px;
        p{ color: #303133;}
        .record-tip-con{
            padding-top: 10px;
        }
    }
}
</style>